<template lang='pug'>
  .pos-r.mt-20
    Table(border :columns="thead" :data="combinationsArr")
      //- template(slot-scope="{ row, index }" slot="enable")
      //-   Checkbox(v-model="row.enable" @on-change="enableChange(row,index)")
      .input-h24(slot-scope="{ row, index }" slot="price")
        Input.input-has-border(v-model="row.amount" type="number" @on-change="tablePriceChange(row, index)")
      .input-h24(slot-scope="{ row, index }" slot="rule")
        RadioGroup(v-model="row.charge" @on-change="tableRadioChange(row,index)")
          Radio(label="1" border) 当月新增当月收费
          Radio(label="5" border) 当月新增次月收费
          //- Radio(label="2" border)
          //-   span 预收：
          //-   Input.input-has-border(v-model="row.advanceMonths" style="width:100px" @on-change="tableMonthChange(row,index)")
          //-   span 个月（
          //-   .early-collection 是否提前收取：
          //-     i-switch(v-model="row.isAhead" @on-change="tableSwitchChange(row,index)")
          //-       span(slot="open") 是
          //-       span(slot="close") 否
          //-   span ）
    Divider.mt-5.mb-0
    Checkbox.d-f-c.mt-10(v-model="discardLast")
      .ml-10 收头不收尾
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    fuwufeiModel1: Boolean,
    commonDate: Object,
    rateDetails: Array,
    value: Number,
    SFFirst: Boolean
  },
  data () {
    return {
      posDetails: [],
      // 服务费按人头收费
      discardLast: false,
      // 服务费按组合项目收费
      thead: [
        // {type: 'selection', width: 60, fixed: 'left'},
        // {title: '是否启用', slot: 'enable', width: 100},
        {title: '组合方式', key: 'name', width: 200},
        {title: '服务费金额(元/人/月)', slot: 'price', width: 120},
        {title: '收费规则', slot: 'rule', minWidth: 800}
      ],
      combinationsArr: [
        {enable: true, category: '17',name:'社保', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '18',name:'公积金', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '20',name:'商保', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '24',name:'薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '19',name:'社保+公积金', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '21',name:'社保+商保', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '25',name:'社保+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '22',name:'公积金+商保', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '26',name:'公积金+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '28',name:'商保+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '23',name:'社保+公积金+商保', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '27',name:'社保+公积金+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '29',name:'社保+商保+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '30',name:'公积金+商保+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
        {enable: true, category: '31',name:'社保+公积金+商保+薪资', amount: 0, charge: '1', advanceMonths: 0, isAhead: true},
      ],
    }
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    enableChange (row,index) {
      this.combinationsArr[index].enable = row.enable
    },
    tablePriceChange (row,index) {
      console.log(row,index)
      this.combinationsArr[index].amount = row.amount
    },
    tableRadioChange (row, index) {
      this.combinationsArr[index].charge = row.charge
    },
    tableMonthChange (row, index) {
      this.combinationsArr[index].advanceMonths = row.advanceMonths
    },
    tableSwitchChange (row,index) {
      this.combinationsArr[index].isAhead = row.isAhead
    },
    submit () {
      console.log(this.combinationsArr)
      if (this.fuwufeiModel1) {
        this.posDetails = this.combinationsArr
      } else {
        this.posDetails = []
      }
      this.postByCombiningTypeSFProject()
    },
    postByCombiningTypeSFProject () {
      InsureProjectApi.PostByCombiningTypeSFProject({
        Name: this.commonDate.name,
        Type: this.value,
        FollowInsure: this.commonDate.hasInsure,
        DiscardLast: this.discardLast,
        Details: this.posDetails,
        RateDetails: this.rateDetails,
        SFFirst: this.SFFirst
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          this.refreshData()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 重置数据
    refreshData () {
      Object.assign(this.$data, this.$options.data())
    }
  },

  watch: {
  }

}

</script>
<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>